<!--计量单位选择框-->
<template>
  <div>
    <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="800px" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
      <BasicTable
        :columns="columns"
        v-bind="config"
        :useSearchForm="true"
        :formConfig="formConfig"
        :api="planOrderResultList"
        :searchInfo="searchInfo"
        :rowSelection="rowSelection"
        :indexColumnProps="indexColumnProps"
      >
      </BasicTable>
    </BasicModal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { planOrderResultList } from './base.api';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
import { selectProps } from '/@/components/Form/src/jeecg/props/props';
import { useAttrs } from '/@/hooks/core/useAttrs';
export default defineComponent({
  name: 'deviceSelectModal',
  components: {
    BasicModal,
    BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
      loading: true,
    }),
  },
  props: {
    ...selectProps,
    modalTitle: {
      type: String,
      default: '选择计划订单',
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },

  emits: ['register', 'getSelectResult'],
  setup(props, { emit }) {
    let type = ''; //1.库存单位 2.重量单位 3.体积单位

    const [register, { closeModal }] = useModalInner(async (data) => {
      type = data.type;
    });
    const attrs = useAttrs();

    const config = {
      canResize: false,
      bordered: true,
      size: 'small',
      rowKey: unref(props).rowKey,
      labelKey: 'name',
      isRadioSelection: !(props.multiple == true) ?? true,
    };
    const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
    const [{ rowSelection, indexColumnProps, visibleChange, getSelectResult }] = useSelectBiz(planOrderResultList, getBindValue);

    rowSelection.columnWidth = 50;
    indexColumnProps.width = 50;
    const searchInfo = ref(props.params);
    //查询form
    const formConfig = {
      labelWidth: 100,
      baseColProps: {
        xs: 8,
        sm: 8,
      },
      schemas: [
        {
          label: '计划订单',
          field: 'planOrderCode',
          component: 'JInput',
          colProps: { span: 8 },
        },
        {
          label: '产品',
          field: 'materialId',
          component: 'JInput',
          colProps: { span: 8 },
        },
      ],
    };

    const columns = [
      {
        title: '产品编码',
        dataIndex: 'materialCode',
        width: 100,
      },
      {
        title: '产品名称',
        dataIndex: 'materialName',
        width: 100,
      },
      {
        title: '规格',
        dataIndex: 'specs',
        width: 100,
      },
      {
        title: '计划订单',
        dataIndex: 'planOrdrName',
        width: 100,
      },
      {
        title: '计划订单行',
        dataIndex: 'planOrdrRowNum',
        width: 100,
      },
    ];

    function handleOk() {
      getSelectResult((options, values) => {
        //回传选项和已选择的值
        emit('getSelectResult', options, values, type);
        //关闭弹窗
        closeModal();
      });
    }

    return {
      config,
      handleOk,
      searchInfo,
      register,
      indexColumnProps,
      visibleChange,
      planOrderResultList,
      formConfig,
      getBindValue,
      columns,
      rowSelection,
    };
  },
});
</script>
